import React, {useEffect, useState} from 'react';
import './index.css'
import http from "../../../util/http";
import {useLocation, useNavigate} from "react-router-dom";
import more from '../img/more.png'
import { Timeline } from 'antd';
import icon from '../News/image/icon.svg'
import {getTermTranslation} from "../../../util/language";
import {useAppContext} from "../../../App";
function TimeLine(props) {
    let navigate = useNavigate();
    const { selectTab, setSelectTab,selectLanguage, setSelectLanguage } = useAppContext();
    const { routeHistory, setRouteHistory } = useAppContext();
    const [totalList, setTotalList] = useState([]);
    const [years, setYears] = useState([]);
    const [currList, setCurrList] = useState([]);
    useEffect(() => {
        // 285
        http.doPost('/doc/getSpecialdoc', {category: "423,304,427,307,429,308,316,431,675,677,441,443,444,446,447,449,450,452,749,750,751,752,753,754,755,756,930,932,933,935,936,938,939,941,529,534,530,536,531,538,679,681,532,540,541,543", pageSize: 7, pageNum: 1}).then(res => {
            if (res.status === 200) {

                const list = res.data.list;
                setTotalList(list)
                const yearSet = [...new Set(list.map(item => {
                        return item.docCreateDate.split("-")[0]
                    }
                ))]
                yearSet.sort((a, b) => b - a);
                setYears(yearSet)
                setCurrList(list);
                /*
                // 初次加载的时候就不做过滤了
                if (yearSet.length > 0) {
                    const currYear = yearSet[0]
                    const filterList = list.filter(item => item.docCreateDate.split("-")[0] === currYear);
                    setCurrList(filterList);
                }

                 */

            }
        })
    }, [])
    function changeYears(year){
        const filterList = totalList.filter(item => item.docCreateDate.split("-")[0] === year);
        setCurrList(filterList);
    }
    function openUrl(docId) {
        if (docId && docId !== "") {
            setSelectTab("专题专栏")
            navigate('/portal/details', {
                state: {docId, page: "home", text: ""}
            });
        }
    }
    const location = useLocation();

    function toPage(url, page, text, params, event) {
        setSelectTab("专题专栏")
        setRouteHistory((prev) => [...prev, location.pathname]);
        if (clickedIndex == null){
            navigate(url, {
                replace: false,
                state: {
                    params,
                    page,
                    text,
                }
            })
        }else{
            navigate(url, {
                replace: false,
                state: {
                    params,
                    page,
                    text,
                    selectYears: years[clickedIndex]
                }
            })
        }

        event.stopPropagation();
    }
    function handleMouseEnter(index){

        const year = years[index];
        changeYears(year);
    }
    const [clickedIndex, setClickedIndex] = useState(null);

    function handleMouseLeave(index) {
    }

    const handleClick = (index) => {
        setClickedIndex(index);
        handleMouseEnter(index)
        // console.log('Clicked item:', items[index].children);
    };
    return (
        <div className="timeLine-main">
            <div className="timeLine-main-left">
                <div className="timeLine-main-up">
                    <div className="timeLine-header">
                        <div className="timeLine-header-text">
                            <div className="info">{getTermTranslation(selectLanguage,'专题专栏')}</div>
                            <div className="more"
                                 onClick={(event) =>
                                     toPage(
                                         "/portal/diversion",
                                         "specialTopicColumn",
                                         getTermTranslation(selectLanguage,'专题专栏'),
                                         {dirId: "423,304"},
                                         event
                                     )
                                    }>
                                <img src={more}/></div>
                        </div>
                    </div>
                    <div className="timeLine-body">
                        {
                            currList.map((item, index) => {
                                return (
                                    <div className="timeLine-body-one" key={item.id} onClick={() => openUrl(item.id)}>
                                        <div className="timeLine-body-one-left">
                                            <div className="timeLine-body-one-icon">
                                                <img src={icon} alt='图标'/>
                                            </div>
                                            <div className="timeLine-body-one-title"
                                                 title={item.docSubject}>{item.docSubject}
                                            </div>
                                        </div>

                                        <div className="timeLine-body-one-time"
                                             title={item.docCreateDate}>{item.docCreateDate}
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
            </div>
            <div className="timeLine-main-right">
                <div className="timeLine-main-right-up">
                    <div className="timeLine-main-right-up-inner">
                        {getTermTranslation(selectLanguage,'历年')}
                    </div>

                </div>
                <div className="timeLine-main-right-body">
                    <Timeline className="custom-timeline">
                        {years.map((item, index) => (
                            <Timeline.Item
                                key={item}
                                className={clickedIndex === index ? 'clicked' : ''}
                                onClick={() => handleClick(index)}
                            >
                                {item}
                            </Timeline.Item>
                        ))}
                    </Timeline>
                </div>

            </div>
        </div>
    );
}

export default TimeLine;
